import React, { Component } from 'react'
import { Form, Input, Select, InputNumber, Space, Button, Modal } from 'antd'
import PropTypes from 'prop-types'
import { ExclamationCircleOutlined } from '@ant-design/icons'
import { ApproveBlock, Header, Line, Cell, Split } from '@components/ApprovePre/Approve'
import style from './Style.module.less'
import Text from '@components/Text'
import { strToNum } from '@src/assets/js/tool'
const { Item } = Form
const { Option, OptGroup } = Select
const { confirm } = Modal
export default class BillBlock extends Component {
  formRef = React.createRef()
  // 改变交费人
  changePayer (id) {
    const c = this.formRef.current
    const list = [...this.props.applicants, ...this.props.respondents].filter(li => li.status)
    list.forEach(li => {
      if (li.id === id) {
        c.setFieldsValue({ payer: li.name })
      }
    })
  }

  // 提交二次确认
  confirm (d) {
    confirm({
      icon: <ExclamationCircleOutlined />,
      content: '您确认要提交吗？',
      onOk: () => {
        this.props.onFinish(d)
      }
    })
  }

  computeAmount () {
    const c = this.formRef.current
    const o = c.getFieldsValue()
    const amount = strToNum(o.fee_acceptance) + strToNum(o.fee_processing) + strToNum(o.fee_other)
    c.setFieldsValue({ amount })
  }

  render () {
    const { data: d, types, applicants, respondents } = this.props
    const initialValues = { amount: 0, fee_acceptance: 0, fee_processing: 0, fee_other: 0, ...d }
    return (
      <Form name='bill-block' labelCol={{ flex: '110px' }} ref={this.formRef} initialValues={initialValues} onFinish={d => this.confirm(d)}>
        <ApproveBlock>
          <Header title={d.id ? '修改交费单' : '新增交费单'} />
          <Item noStyle name='id'><span /></Item>
          <Item noStyle name='caseid'><span /></Item>
          <Line>
            <Cell>
              <Item label='交费单类型' name='type' rules={[{ required: true, message: '交费单类型不能为空' }]}>
                <Select placeholder='请选择交费单类型'>
                  {types.map(li => <Option key={li.title} value={li.value}>{li.title}</Option>)}
                </Select>
              </Item>
            </Cell>
            <Split />
            <Cell>
              <Item label='交/退费金额' name='amount' rules={[{ required: true, message: '交费金额不能为空' }]}>
                <Text format={v => v === undefined || v === null ? '无' : v} />
              </Item>
            </Cell>
            <Split />
            <Item name='payer' noStyle><span /></Item>
            <Cell>
              <Item label='支付人' name='payerid' rules={[{ required: true, message: '支付人不能为空' }]}>
                <Select placeholder='请选择支付人' allowClear onChange={d => this.changePayer(d)}>
                  <OptGroup label='申请人'>
                    {applicants.filter(li => li.status).map(li => <Option key={li.id} value={li.id}>{li.name}</Option>)}
                  </OptGroup>
                  <OptGroup label='被申请人'>
                    {respondents.filter(li => li.status).map(li => <Option key={li.id} value={li.id}>{li.name}</Option>)}
                  </OptGroup>
                </Select>
              </Item>
            </Cell>
          </Line>
          <Line>
            <Cell>
              <Item label='受理费' name='fee_acceptance'>
                <InputNumber placeholder='退费输入负数' style={{ width: '100%' }} onChange={() => this.computeAmount()} />
              </Item>
            </Cell>
            <Split />
            <Cell>
              <Item label='处理费' name='fee_processing'>
                <InputNumber placeholder='退费输入负数' style={{ width: '100%' }} onChange={() => this.computeAmount()} />
              </Item>
            </Cell>
            <Split />
            <Cell>
              <Item label='其他费用' name='fee_other'>
                <InputNumber placeholder='退费输入负数' style={{ width: '100%' }} onChange={() => this.computeAmount()} />
              </Item>
            </Cell>
          </Line>
          <Line>
            <Cell>
              <Item name='remark1' label='减/缓情况'>
                <Input placeholder='请输入减/缓情况' />
              </Item>
            </Cell>
            <Split />
            <Cell>
              <Item name='description' label='交费原因'>
                <Input placeholder='请输入交费原因' />
              </Item>
            </Cell>
          </Line>
          <div className={style['btn-box']}>
            <Space>
              <Button onClick={() => this.props.cancelHandle()}>取消</Button>
              <Button type='primary' ghost htmlType='submit'>确定</Button>
            </Space>
          </div>
        </ApproveBlock>
      </Form>
    )
  }
}

BillBlock.proptypes = {
  data: PropTypes.object,
  types: PropTypes.array,
  applicants: PropTypes.array,
  respondents: PropTypes.array,
  onFinish: PropTypes.func,
  cancelHandle: PropTypes.func
}

BillBlock.defaultProps = {
  data: {},
  types: [],
  applicants: [],
  respondents: [],
  onFinish: () => {},
  cancelHandle: () => {}
}
